<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Basic } from '@/api';
import { useRouter, useRoute } from 'vue-router';
let info = ref({});
let load_logo = async () => {
    let { status, msg, data } = await Basic.info();
    info.value = data;
}
onMounted(() => {
    load_logo();
})
let form = reactive({
    account: '',
    pwd: '',
});
let rules = reactive({
    account: [
        { required: true, message: '请输入账号名称', trigger: 'blur' },
        { min: 3, max: 5, message: '账号长度在 3 到 5 个字符', trigger: 'blur' }
    ],
    pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern: /^\d{6,}/, message: '密码至少6个数字', trigger: 'blur' }
    ],
});
// 获取router实例对象
let router = useRouter();
let form_ref = ref(null);
let handleLogin = () => {
    form_ref.value.validate(async (valid) => {
        if (valid) {
            let { status, msg, data } = await Basic.login({ ...form });
            if (status) {
                console.log(data);
                //信息提示
                ElMessage.success(msg);
                router.push('/home/list')
                sessionStorage.token = data.token;
            } else {
                //信息提示
                ElMessage.error(msg);
            }
        }
    })
}
</script>
<template>
    <div class="bg">
        <div class="box-card">
            <el-row class="card">
                <img src="./img/login.jpg" alt="">
                <el-form :model="form" :rules="rules" class="form" ref="form_ref" status-icon>
                    <el-form-item><img :src="info.login_logo" alt=""></el-form-item>
                    <el-form-item prop="account">
                        <el-input type="text" v-model="form.account" placeholder="请输入账号">
                            <template #prefix>
                                <el-icon>
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input type="password" v-model="form.pwd" placeholder="请输入密码">
                            <template #prefix>
                                <el-icon>
                                    <Lock />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width: 100%;" @click="handleLogin" type="primary">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<style lang="less" scoped>
.bg {
    width: 100vw;
    height: 100vh;
    background: url('./img/login-bg.jpg');
    background-size: cover;
    position: relative;

    .box-card {
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        width: 910px;
        height: 420px;
        background-color: white;

        .form {
            padding: 50px;
            width: 300px;
            text-align: center;
        }
    }
}

</style>